<extend name="Base/store_index" />

<!---商户默认模板-->
<block name="bodyStore">
<style>
  @media (min-width:1600px) {
    .index .container, .category .container {width:1200px;}
  }
</style>

<!-- /头部 -->
<div  class="home-slider">
  <ul class="item">
    <volist name="slideList" id="vo">
      <li><a href="{$vo.url}" style="background-image: url({:get_cover($vo['slide'],'path')})" target="_blank"></a></li>
    </volist>
  </ul>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <ul class="nav">
          <volist name="slideList" id="vo">
            <li class=""></li>
          </volist>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- 广告位  另一套模板使用 
<div class="pc_index_1x4">
  <div class="container">
    <ul class="item" style="">
      <li class="col-xs-2"> <a href="1" title="用心挑选" target="_blank"><img src="http://xxb.jipushop.com/Uploads/Picture/2017-01-06/586fbcdd547f0.jpg" /></a>
        <h3>用心挑选</h3>
        <p>用心挑选，就是好的</p>
        <span><a href="1" title="用心挑选" target="_blank">去看看 ></a></span> </li>
      <li class="col-xs-2"> <a href="2" title="精选套装" target="_blank"><img src="http://xxb.jipushop.com/Uploads/Picture/2017-01-06/586fbc0e58ba8.jpg" /></a>
        <h3>精选套装</h3>
        <p>大牌精选，不二选择</p>
        <span><a href="2" title="精选套装" target="_blank">去看看 ></a></span> </li>
      <li class="col-xs-2"> <a href="3" title="大牌工具" target="_blank"><img src="http://xxb.jipushop.com/Uploads/Picture/2017-01-06/586fbc6f4cf24.jpg" /></a>
        <h3>大牌工具</h3>
        <p>精选套装，更实惠</p>
        <span><a href="3" title="大牌工具" target="_blank">去看看 ></a></span> </li>
      <li class="col-xs-2"> <a href="3" title="国际品牌" target="_blank"><img src="http://xxb.jipushop.com/Uploads/Picture/2017-01-07/586fc36f1e48f.jpg" /></a>
        <h3>国际品牌</h3>
        <p>国际品牌驾到</p>
        <span><a href="3" title="国际品牌" target="_blank">去看看 ></a></span> </li>
      <li class="col-xs-2"> <a href="4" title="新手必备" target="_blank"><img src="http://xxb.jipushop.com/Uploads/Picture/2017-01-07/586fc3a75334f.jpg" /></a>
        <h3>新手必备</h3>
        <p>新手必备套装</p>
        <span><a href="4" title="新手必备" target="_blank">去看看 ></a></span> </li>
      <li class="col-xs-2"> <a href="1" title="化妆套餐" target="_blank"><img src="http://xxb.jipushop.com/Uploads/Picture/2017-01-07/586fc46d80e15.jpg" /></a>
        <h3>化妆套餐</h3>
        <p>品质套餐，实惠之选</p>
        <span><a href="1" title="化妆套餐" target="_blank">去看看 ></a></span> </li>
    </ul>
    <div class="lr_btn"><span class="icon icon-arrow-left"></span><span class="icon icon-arrow-right"></span></div>
  </div>
</div>
-->

<!--推荐模块-->
<div class="col-xs-12 category">
  <div class="container"> 
    <div class="shop-header wow" style=" animation-name: fadeInUp;">
      <p class="title">热卖推荐</p>
      <p class="subtitle">Hot recommendation</p>
    </div>
    <ul class="shop-content_list" >
      <volist name="hotList" id="vo">
        <li class="projectitem wow" > <a href="{:U('Item/detail', array('id' => $vo['id']))}" class="projectitem_content" target="_blank">
          <div class="projectitem_wrapper">
            <div class="project_img"><img src="{:get_cover($vo['thumb'],'path')}" ></div>
            <div class="project_info">
              <p class="title">{$vo.name}</p>
              <!--<p class="subtitle" style="color:#f77c04">¥{$vo.price}  {:get_short($vo['summary'],10)}</p>-->
              <p class="subtitle" style="color:#f77c04">¥{$vo.price}</p>
            </div>
          </div>
          </a> </li>
      </volist>
    </ul>
  </div>
</div>

<!-- 全部商品列表 -->
<div class="container">
  <div class="shop-content">
    <div class="shop-header shop-con" style=" animation-name: fadeInUp;">
      <p class="title">所有产品</p>
      <p class="subtitle">All Product</p>
    </div>
    <div  class="category2" style="">
      <volist name="selist" id="vo"> <a href="{:U('Store/search',array('cid'=>$vo['id'],'store_id'=>$store_id))}">{:get_short($vo['name'],20,'')}</a> </volist>
    </div>
    <!--内容-->
    <div class="module-content">
      <div class="projectSubList" >
        <ul id="J_item_list" class="content_list" data-options-sliders="8" data-options-margin="15" data-options-ease="1" data-options-speed="1">
          <volist name="item_lists" id="vo">
            <li class="projectitem col-xs-3 item" style=" animation-name: fadeInUp;">
             <a href="{:U('Item/detail',array('id'=>$vo['id']))}" class="projectitem_content" target="_blank">
              <div class="projectitem_wrapper">
                <div class="project_img"><img src="{:get_cover($vo['thumb'],'path')}"></div>
                <div class="project_info">
                  <div>
                    <p class="title">{$vo.name}</p>
                    <p class="subtitle">¥{$vo.price}</p>
                    <p class="description hide">{:get_short($vo['summary'],100)}</p>
                  </div>
                </div>
              </div>
              </a>
            </li>
          </volist>
        </ul> 
        <!--wrapper--> 
      </div>
    </div>
    <!--projectSubList--> 
    <a href="http://mo004_557.mo4.line1.jsmo.xin/project/" class="more wow" style="visibility: hidden; animation-name: none;">MORE<i class="fa fa-angle-right"></i></a> </div>
  <!--projectlist-->
  <div class="clear"></div>
</div>

<script>
  seajs.use(['jquery','jquery.imglazyload','index'],function($,lz){
    var path=$('#J_item_list .item')
    var reloadWindow=function(){
        if($(window).width()>1600){
          path.removeClass('col-xs-3');
          path.addClass('col-xs-2');
        }else{
          path.removeClass('col-xs-2');
          path.addClass('col-xs-3');
        }
    }
    $(window).resize( function(){
        reloadWindow();
    });
    reloadWindow()
    $.imgLazyLoad({ diff: 100 })
  })
  </script> 
</block>